<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Tailwind CSS Sandbox</title>
  </head>
  <body class="bg-blue-800">
    <div class="container bg-gray-50 h-full p-6 max-w-lg">
      <h1 class="text-3xl text-blue-800">Tailwind CSS Sandbox</h1>
      <ul class="mt-6">
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="01-utility-first/index.html"
            >Utility First Example</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="02-colors/index.html"
            >Colors</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a
            class="text-blue-500 hover:text-blue-300"
            href="03-container-spacing/index.html"
            >Container & Spacing</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="04-typography/index.html"
            >Typography</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="05-sizing/index.html"
            >Sizing</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a
            class="text-blue-500 hover:text-blue-300"
            href="06-layout-position/index.html"
            >Layout & Position</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a
            class="text-blue-500 hover:text-blue-300"
            href="07-backgrounds-shadows/index.html"
            >Backgrounds & Shadows</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="08-borders/index.html"
            >Borders & Border Radius</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="09-filters/index.html"
            >Filters</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="10-interactivity/index.html"
            >Interactivity</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="11-breakpoints/index.html"
            >Breakpoints</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="12-columns/index.html"
            >Column Layouts</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="13-flex/index.html"
            >Flexbox</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="14-grid/index.html">Grid</a>
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a
            class="text-blue-500 hover:text-blue-300"
            href="15-transform-transition/index.html"
            >Transform & Transitions</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="16-animation/index.html"
            >Animation</a
          >
        </li>
         <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="17-customization/index.html"
            >Customization & Config</a
          >
        </li>
        <li class="text-lg border border-blue-200 p-2 my-4">
          <a class="text-blue-500 hover:text-blue-300" href="18-dark-mode/index.html"
            >Dark Mode</a
          >
        </li>
      </ul>
    </div>
  </body>
</html>
